<template>
  <div class="home card">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="主诊医生">
          <el-input clearable v-model="formInline.doctorName" placeholder="" style="width: 180px" />
        </el-form-item>

        <el-form-item label="项目分组">
          <el-select v-model="formInline.chiefId" placeholder="" style="width: 120px" clearable>
            <el-option v-for="item in xmfzlist" :key="item.id" :label="item.projectName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="入组状态">
          <el-select v-model="formInline.joiningStatus" placeholder="" style="width: 120px" clearable>
            <el-option v-for="item in zzztlist" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item label="复诊状态">
          <el-select v-model="formInline.returnVisitStatus" placeholder="" style="width: 120px" clearable>
            <el-option v-for="item in fzztlist" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="addbutton">新增患者</el-button>
          <el-button type="primary" @click="deletebutton">删除</el-button>
          <!-- <el-button type="primary" @click="exportbutton">导出</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <div class="contentbox">
      <div class="table-box">
        <el-table :data="datalist" border style="width: 100%" max-height="500" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="serialNumber" label="序号" width="120">
            <template #default="scope">
              <el-input prop="serialNumber" @blur="xhinput(scope.row)" v-model="scope.row.serialNumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="患者姓名" width="120">
            <template #default="scope">
              <span class="hzbox" @click="hzxqbutton(scope.row)">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="enrollmentDate" label="入组时间" />
          <el-table-column prop="projectName" label="项目分组" />
          <el-table-column prop="joiningName" label="入组状态" />
          <el-table-column prop="returnVisitName" label="复诊情况" />
          <el-table-column prop="idCard" label="身份证号" />
          <el-table-column prop="phoneNumber" label="手机号" />
          <el-table-column prop="diabetesName" label="病型 " />
          <el-table-column prop="doctorName" label="主诊医生" />
          <el-table-column label="操作" width="80" align="center">
            <template #default="scope">
              <el-button v-if="scope.row.joiningName == '待入组'" type="primary" size="small" @click="ruzubutton(scope.row)"
                >入组</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fybox">
        <el-pagination
          v-model:current-page="formInline.pageNum"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[10, 50, 100, 200]"
          layout="total, sizes, prev, pager"
          :total="pagetotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <Addzj v-if="showaddtc" ref="addzjComponent" @addConten="Addfn" @xmfzlist="getYZlist" />
  </div>
</template>

<script setup name="home">
import { ref, reactive, nextTick } from "vue";
import Addzj from "@/views/home/add.vue";
import { useRouter, useRoute } from "vue-router";
import { getListApi, addxzhzApi, deletehzApi, exporthzInfo, patientEnrollment, editSerialNumber } from "@/api/hzmange/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useDownload } from "@/hooks/useDownload";
const router = useRouter();
const activeName = ref("1");
const route = useRoute();
const formInline = reactive({
  doctorName: "",
  chiefId: "",
  joiningStatus: "",
  returnVisitStatus: "",
  pageNum: 1,
  pageSize: 10
});
let showaddtc = ref(false);
const YZlist = JSON.parse(sessionStorage.getItem("YZlist"));
let xmfzlist = ref([]); //项目分组
let zzztlist = ref([]); //入组状态
let fzztlist = ref([]); //复诊状态
zzztlist.value = YZlist.joining_status;
fzztlist.value = YZlist.return_visit_status;
let dialogVisible = ref(false);
//可以从路由中获取参数，然后进行搜索
formInline.name = route.query.name;
getList();
const handleClick = tab => {
  console.log(activeName.value);
};
let datalist = ref([]);
const zztdvalue = ref("");

const ruleFormRef = ref(null);
var pagetotal = ref(0);
let currentPage = ref(1);
let pageSize = ref(10);

let handleSizeChange = () => {
  getList();
};
let handleCurrentChange = () => {
  getList();
};
let hzxqbutton = e => {
  router.push({
    path: "/hzinfo",
    query: e
  });
};
const form = reactive({
  sbh: "",
  name: "",
  phone: "",
  xty: ""
});
const savebutton = async formEl => {
  ruleFormRef.value?.validate(valid => {
    if (valid) {
      console.log("submit!", form);
      // 在这里处理表单提交逻辑
      dialogVisible.value = false;
    } else {
      ElMessage.error("请检查表单信息");
    }
  });
};
const addzjComponent = ref(null);
const addbutton = async () => {
  showaddtc.value = true;
  await nextTick();
  addzjComponent.value.open();
};
function search() {
  formInline.name = ""; //清空搜索条件，转过来的name
  getList();
}
const Addfn = val => {
  addxzhzApi(val).then(res => {
    if (res.code == 200) {
      ElMessage({
        message: "新增成功!",
        type: "success"
      });
      getList();
    }
  });
};

// 获取数据
function getList(e) {
  let params = formInline;
  getListApi(params).then(res => {
    datalist.value = res.rows;
    pagetotal.value = res.total;
  });
}
let selection = ref([]);
const handleSelectionChange = e => {
  selection.value = e;
};
const deletebutton = () => {
  if (selection.value.length == 1) {
    ElMessageBox.confirm("确定删除?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      deletehzApi({
        e: selection.value[0].id
      }).then(res => {
        ElMessage({
          type: "success",
          message: `${res.msg}`
        });
        getList();
      });
    });
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
const exportbutton = async () => {
  ElMessageBox.confirm("确认导出用户数据?", "温馨提示", { type: "warning" }).then(() =>
    useDownload(exporthzInfo, "用户列表", formInline)
  );
};
function getYZlist(e) {
  xmfzlist.value = e; //从子组件的请求拿过来数据
}
function ruzubutton(e) {
  patientEnrollment({
    patientId: e.id,
    chiefId: e.chiefId
  }).then(res => {
    ElMessage({
      type: "success",
      message: `${res.msg}`
    });
    getList();
  });
}
function xhinput(e) {
  editSerialNumber({
    chiefId: e.chiefId, //主诊团队ID
    patientId: e.id, //患者编号
    serialNumber: e.serialNumber //患者序列号
  }).then(res => {
    ElMessage({
      type: "success",
      message: `${res.msg}`
    });
  });
}
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .contentbox {
    width: 100%;
  }

  .szbox {
    justify-content: end;
    display: flex;
  }
}

.card {
  padding: 25px;
}

.hzbox {
  color: #409eff;
  cursor: pointer;
}

.savebox {
  display: flex;
  justify-content: center;
}
.fybox {
  display: flex;
  justify-content: end;
}
</style>
